<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			.no,
			.yes {
				width: 200px;
				height: 200px;
				border: 1px solid #ccc;
				margin: 10px;
			}

			h3 {
				margin: 0;
				padding: 0;
			}

			ul {
				margin: 0;
				padding: 0;
				margin-top: 10px;
			}

			li {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 创建 -->
			<div>
				<div>
					<input type="text" v-model="taskinfo.name">
					<button type="button" @click="addtask()">添加任务</button>
				</div>
			</div>


			<!-- 展示 -->
			<div class="no">
				<div v-if="taskList.length >0">
					<table border="0" cellspacing="0" cellpadding="0">
						<h3>未完成任务</h3>
						<tr v-for="(item,index) of taskList">
							<td><input type="checkbox">{{item.name}}</td>
							<td>
								<button type="button" @click="deltask(index)">删除</button>
							</td>
						</tr>
					</table>
				</div>
				<div v-else>
					<p>任务都已完成,请添加新任务</p>
				</div>
			</div>
		 
			<div class="yes">
				<div v-if="sucinfo.length  < 0 ">
					<h3>已完成任务</h3>
					<ul>
						<li><input type="checkbox" v-model="sucinfo.name" @click="mdtask"/>{{sucinfo.name}}<button type="button" @click="deltask(index)">删除</button></li>
					</ul>
				</div>
				<div v-else>
					<h3>目前没有完成的任务</h3>
				</div>
			</div>
		</div>






		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let myApp = new Vue({
				el: '#app',
				data: {
					taskList: [],
					taskinfo: {
						name: ''
					},
					sucinfo: {
						name: ''
					},
					currenIndex: 0

				},
				methods: {
					addtask() {
						this.taskList.push(this.taskinfo)
						this.taskinfo = {
							name: ''
						}
					},
					mdtask(currenIndex){
						
					},
					deltask(index){
						this.taskList.splice(index,1)
					},
				}
			})
		</script>

	</body>
</html>
